<template>
	<view class="container">
		<view class="title">
			<text class="title-text">陪诊</text>
		</view>
		<view class="form">
			<view class="input-wrapper">
				<input v-model="username" placeholder="用户名" class="input" />
			</view>
			<view class="input-wrapper">
				<input v-model="password" placeholder="密码" type="password" class="input" />
			</view>
			<view class="button-wrapper">
				<button @click="login" class="login-button">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const username = ref('');
	const password = ref('');

	const login = () => {
		// 假设管理员账号为 admin，密码为 admin
		// 假设普通用户账号为 user，密码为 user
		if (username.value === 'admin' && password.value === 'admin') {
			// 如果是管理员账号，存储用户类型并跳转到个人页面
			uni.setStorageSync('userType', 'admin');
			navigateToMyPage();
		} else if (username.value === 'user' && password.value === 'user') {
			// 如果是普通用户账号，存储用户类型并跳转到个人页面
			uni.setStorageSync('userType', 'user');
			navigateToMyPage();
		} else {
			uni.showToast({
				title: '用户名或密码错误',
				icon: 'none'
			});
		}
	}

	const navigateToMyPage = () => {
		uni.switchTab({
			url: '/pages/index/index'
		}).catch(error => {
			console.error("跳转页面失败:", error);
		});
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.title {
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 24px;
		font-weight: bold;
	}

	.form {
		width: 80%;
	}

	.input-wrapper {
		margin-bottom: 20px;
	}

	.input {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
	}

	.button-wrapper {
		display: flex;
		justify-content: center;
	}

	.login-button {
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 12px 50px;
		cursor: pointer;
		font-size: 16px;
		font-weight: bold;
		transition: background-color 0.1s ease-in-out;
	}

	.login-button:hover {
		background-color: #0056b3;
	}
</style>
